<template>
	<view class="ss-flex-col ss-col-center">
		<view :class="className">{{ number }}</view>
		<view>{{ name }}</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		className: {
			type: String,
			default: 'red'
		},
		number:{
			type: [Number,String],
			default: 0
		},
		name:{
			type: String,
			default: ''
		}
	})
</script>

<style lang="scss" scoped>
	.red {
		width: 45px;
		height: 45px;
		background-image: url('/static/bg/red-text.png');
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #505050;
		font-size: 14px;
	}
	.green {
		width: 45px;
		height: 45px;
		background-image: url('/static/bg/green-text.png');
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #505050;
		font-size: 14px;
	}
	.blue {
		width: 45px;
		height: 45px;
		background-image: url('/static/bg/blue-text.png');
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #505050;
		font-size: 14px;
	}
</style>